import { useState, useEffect } from 'react'
import styles from './index.module.scss'
import { Table, Pagination, ConfigProvider } from 'antd'
import type { PaginationProps } from 'antd';
import zhCN from 'antd/es/locale/zh_CN';

export default function TableList(props: any) {
    const { columns, initData, pagination, pageChange, currentChange } = props

    // 分页信息
    const [current, setCurrent] = useState(1);

    const onShowSizeChange: PaginationProps['onShowSizeChange'] = (current, pageSize) => {
        pageChange(current, pageSize)
    };

    const onChange: PaginationProps['onChange'] = (page) => {
        setCurrent(page)
        currentChange(page)
    };

    return (
        <div className={styles.TableList}>
            {/* 显示为中文 */}
            <ConfigProvider locale={zhCN}>
                <Table
                    bordered
                    rowKey={(record) => record.id}
                    scroll={{ y: 520 }}
                    style={{ marginTop: 30 }}
                    columns={columns}
                    dataSource={initData}
                    pagination={false} />
                <Pagination
                    showQuickJumper
                    showSizeChanger
                    current={current}
                    total={pagination.total}
                    showTotal={(total) => `共 ${total} 条`}
                    onChange={onChange}
                    onShowSizeChange={onShowSizeChange} />
            </ConfigProvider>
        </div>
    )
}
